<template>
    <div style="width: 960px;margin-top: 20px" ref="manage">
        <div class="content contentone">
            <a-input-search placeholder="关键字查询" style="width: 200px" @search="onSearch"/>
            <a-button style="margin-left: 20px">刷新</a-button>
            <a-divider orientation="left">分组列表</a-divider>
            <a-table :columns="columns1" :dataSource="data" :style="{width:'840px'}" rowKey="key" v-show="data.length==0? false: true">

                <template slot="operation" slot-scope="text,record">
                    <a href="javascript:;"  @click="showDrawer(record.clientid)" >添加设备到分组</a>
                </template>
            </a-table>
        </div>
        <div style="min-height: 240px">
            <a-empty v-show="data.length==0? true: false" style="margin-top: 60px"
                     image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original">
                <span slot="description"> 暂无分组 </span>
            </a-empty>
        </div>

        <a-drawer title="添加设备到分组" placement="right" :closable="false" @close="onClose" :visible="visible" width="500px">
            <div>
                <a-table bordered :dataSource="dataSource" :columns="columns">
                    <a slot="name" slot-scope="text" href="javascript:;">{{text}}</a>
                    <span slot="customTitle"></span>
                    <span slot="tags" slot-scope="tags">
                     <a-tag  :color="tags=='离线'?'red':'blue'" >{{tags}}</a-tag>
                    </span>

                    <template slot="operation" slot-scope="text, record">
                        <a-button type="primary"  style="margin-right: 10px"
                                  :disabled="record.clientid==key? true:false" @click="subcribe(record.clientid)">添加</a-button>
                        <a-popconfirm v-if="dataSource.length" title="确定移除"
                                @confirm="() => onDelete(record.clientid)">
                            <a-button type="danger"   :disabled="record.clientid==key? true:false">移除</a-button>
                        </a-popconfirm>
                    </template>
                </a-table>
            </div>
        </a-drawer>

        </div>


</template>

<script>

    import {getClient, getNodeClientInfo,subscribe,unsubscribe} from "@/api/mqtt";

    const columns1 = [ {
        title: '分组名称',
        dataIndex: 'clientid',
        key: 'clientid',
      },
        {   title: '所属设备',
            dataIndex: 'clientname',
            key: 'clientname',
            slots: { title: 'customTitle' },
            scopedSlots: { customRender: 'name' },
        },
        {
        title: '创建时间',
        dataIndex: 'add_time',
        key: 'address',
      },
        {
        title: '操作',
        key:'operation',
        dataIndex: 'operation',
        scopedSlots: { customRender: 'operation' },

    }];


    export default {
        name: "Manage",
        components: {
           // HeadInfo,


        },
        data(){
            return{
                key:"",
                data:[],
                columns1,
                dataSource: [

                ],

                status:'all',
                visible: false,
                columns: [
                    {
                        title: '设备号',
                        dataIndex: 'clientid',
                        width: '30%',

                    },
                    {
                        title: '状态',
                        dataIndex: 'status',
                        scopedSlots: { customRender: 'tags' },
                    },
                    {
                        title: '操作',
                        dataIndex: 'operation',
                        scopedSlots: { customRender: 'operation' },
                    },
                ],
            }
        },created(){
            this.getClients();
        },
        mounted() {

        },methods:{
            onSearch () {
                //console.log(value)
            },
            showDrawer(e) {
                //console.log("key:"+e)
                 this.key=e
                 this.getOnline(e)
            },
            onClose() {
                this.visible = false;
            },
            subcribe(e){
              console.log("设备"+e)
                subscribe({"topic": this.key,"qos": 1,"clientid":e}).then((response)=>{
                   // console.log(response.data["code"])
                    if(response.data["code"]==0){
                        this.$message.success('添加到分组成功！');
                    }else if(response.data["code"]==112){
                        this.$message.error('服务器错误，请联系管理员！');
                    }else{
                        this.$message.warning('添加失败，请重试！');
                    }

                })
            },
            onDelete(e) {
                console.log(e)
                unsubscribe({"topic": this.key,"clientid":e}).then((response)=>{
                    //console.log(response)
                    if(response.data["code"]==0){
                        this.$message.success('移除分组成功！');
                    }else if(response.data["code"]==112){
                        this.$message.error('服务器错误，请联系管理员！');
                    }else{
                        this.$message.warning('移除失败，请重试！');
                    }
                })
            },
            getClients(){
                //console.log("4-挂载，实例被创建时执行")
                getClient().then((res)=>{
                    //console.log(res.data)
                    sessionStorage.setItem('client',JSON.stringify(res.data))
                    this.data=res.data
                    res.data.forEach((item,i)=>{
                        //console.log(i)
                        this.getClientInfo(item.clientid,item,i)
                    })
                }).catch()
            },

             getClientInfo(clientid,item,i){
                    getNodeClientInfo(clientid).then((reponse)=>{
                        const  result=reponse.data.data
                       // console.log(result.length)
                        if(result==0){
                            this.dataSource.push({"key":i,"clientid":item.clientid,"status":"离线"})
                            const dataSource = [...this.data];
                            //this.dataSource = dataSource.filter(item => item.key !== key);
                            this.data= dataSource.filter(item => item.key !==i);

                        }else{
                            this.dataSource.push({"key":i,"clientid":item.clientid,"status":"在线"})
                        }
                    }).catch()
                },
            getOnline(clientid){
                getNodeClientInfo(clientid).then((reponse)=>{
                    const  result=reponse.data.data
                    //  console.log(result.length)
                    if(result==0){
                        this.visible=false
                    }else{
                        this.visible=true;
                    }
                })
            },



        }
    }
</script>
<style scoped>
   .ant-list-item-meta{
       width: 50px;
   }

</style>

<style lang="less" scoped>

    .ant-avatar-lg {
        width: 48px;
        height: 48px;
        line-height: 48px;
    }

    .list-content-item {
        color: rgba(0, 0, 0, .45);
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        margin-left: 40px;
        span {
            line-height: 20px;
        }
        p {
            margin-top: 4px;
            margin-bottom: 0;
            line-height: 22px;
        }
    }
</style>

